<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>节点练习 - 获取节点</title>
</head>

<body>
  <div id="box" class="box">
    <div id="one" class="one">我们是one内容</div>

    <div id="two" class="two">
      <h2>我是two_1内容</h2>
      <h2>我是two_2内容</h2>
      <div class="two">我是two_3内容</div>
    </div>

    <div id="three" class="three">
      我是three内容
      <ul>
        <li>简简单单的早餐</li>
        <li>简简单单的午饭</li>
        <li>简简单单的晚饭</li>
      </ul>
    </div>
  </div>

  <dl>
    <dd><button onclick="btn_id_one()">ID内容相关</button></dd>
    <dd><button onclick="btn_tag_one()">标签内容相关</button></dd>
    <dd><button onclick="btn_class_one()">class内容相关</button></dd>
  </dl>
  <hr />
  <dl>
    <dt>控制台打印</dt>
    <dd>
      <button onclick="btn_tag_two()">获取ul节点中，第二个li节点</button>
      <button onclick="btn_tag_three()">
        获取ul节点中，第二个li节点的内容
      </button>
      <button onclick="btn_tag_four()">获取ul节点中，最后一个li节点</button>
    </dd>
  </dl>

  <script>
    //获取ID节点内容
    const btn_id_one = () => {
      x = document.getElementById("one");
      //获取该节点内容
      one = x.innerHTML;
      console.log("x是：", x);
      console.log("内容是：", one);
    };

    //获取标签节点内容
    const btn_tag_one = () => {
      //获取第一个h2数组内容
      h2 = document.getElementsByTagName("h2")[0];
      li_node = document
        .getElementById("three")
        .getElementsByTagName("li")[1];

      console.log("第一个h2节点内容是：", h2);
      console.log("第二个li节点内容是：", li_node);
    };

    //获取样式节点内容
    const btn_class_one = () => {
      //获取two样式内容
      x = document.getElementsByClassName("two")[1];
      console.log(x);
    };

    //获取ul节点中，第二个li节点
    const btn_tag_two = () => {
      ul_node = document
        .getElementById("three")
        .getElementsByTagName("ul")[0];
      //li_node = ul_node.children[1];
      li_node = ul_node.getElementsByTagName("li")[1];
      console.log(li_node);
    };
    //获取ul节点中，第二个li节点的内容
    const btn_tag_three = () => {
      ul_node = document
        .getElementById("three")
        .getElementsByTagName("ul")[0];
      //li_node = ul_node.children[1];
      li_node = ul_node.getElementsByTagName("li")[1];
      txt = li_node.innerHTML;
      console.log(txt);
    };

    //获取ul节点中，最后一个节点
    const btn_tag_four = () => {
      ul_node = document
        .getElementById("three")
        .getElementsByTagName("ul")[0];
      li_node = ul_node.lastElementChild.innerHTML;
      console.log(li_node);
    };
  </script>
</body>

</html>